<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="参数名称">
        <el-input v-model="form.configName" placeholder="请选择参数名称" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" @click="handleOpenDialog" v-if="$formatFR(config.add)">
          新增
        </el-button>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button type="primary" @click="handleRefresh" v-if="$formatFR(config.cache)">
          缓存
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop label="主键" type="index" width="50" align="center" />
      <el-table-column prop="configName" label="参数名称" align="center" />
      <el-table-column prop="configKey" label="参数键名" align="center" />
      <el-table-column prop="configValue" label="参数键值" align="center" />
      <el-table-column prop="configSys" label="系统内置" align="center" width="100">
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-if="scope.row.configSys === 'Y'">是</el-tag>
          <el-tag type="info" size="mini" v-if="scope.row.configSys === 'N'">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
      <el-table-column prop label="操作" align="center">
        <template slot-scope="scope">
          <el-link
            type="warning"
            size="mini"
            v-if="$formatFR(config.edit)"
            plain
            :style="{ marginRight: '0.0521rem' }"
            @click="handleUpdate(scope.row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            size="mini"
            v-if="$formatFR(config.del)"
            plain
            @click="handleDel(scope.row.id)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
    <AddEditDialog ref="AddEditDialog" :style="{ display: 'none' }" @updatePage="reset" />
  </el-card>
</template>

<script>
import { paramsList, del, refresh } from "@/api/system/config"
import AddEditDialog from "./components/AddEditDialog.vue"
import FUNCROLELIST from "@/utils/func_role/system"
export default {
  components: { AddEditDialog },
  data() {
    return {
      config: FUNCROLELIST.config,
      form: {
        configName: "",
        size: 10,
        current: 1
      },
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        configName: "",
        size: 10,
        current: 1
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    handleOpenDialog() {
      this.$refs.AddEditDialog.init()
    },
    // 编辑
    handleUpdate(scope) {
      this.$refs.AddEditDialog.init(scope)
    },
    handleRefresh() {
      refresh().then(() => {
        this.$message({
          type: "success",
          message: "刷新成功!"
        })
      })
    },
    // 搜索
    handleSearch() {
      this.form.current = 1
      this.getList()
    },
    // 参数数据列表
    getList() {
      paramsList(this.form).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 删除
    handleDel(id) {
      this.$confirm("请确认是否删除当前参数?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    }
  }
}
</script>
